<template>
  <div class="my-containner">
    <div class="left">
      <el-card class="box-card"  style="height:468px">
        <div class="big">
          <div class="small" v-for="item in messageData" :key="item.c_id">
            <el-card class="innerCard">
            <div class="pic" style="width:128px;height:100px"><img style="width:100%;height:100%" :src="evUrl+(item.c_pic.split(',')[1]||'02c31c2cb32115b891479bc99a2e4ca7.jpg')" alt=""></div>
            <div class="tit">
              <div class="titarea"><h5 style="margin:10px 0">{{item.title}}</h5></div>
              </div>
              <div class="operate">
                <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                <el-button @click="openDialog(item)" icon="el-icon-view" size="mini"></el-button>
                </el-tooltip>
                <el-tooltip v-if="(role=='3') || (myId==item.uid)" class="item" effect="dark" content="删除" placement="top-start">
                <el-button  icon="el-icon-delete-solid" @click="deleteIt(item)"  size="mini"></el-button>
                </el-tooltip>
                <el-tooltip v-if="myId&&(!(myId==item.uid)) &&(item.c_collect.split(',').indexOf(myId)!=-1)"  class="item" effect="dark" content="取消" placement="top-start">
                <el-button @click="cancelColleb(item)" icon="el-icon-star-on" size="mini"></el-button>
                </el-tooltip>
                <el-tooltip v-if="(!myId)||(!(myId==item.uid) &&(item.c_collect.split(',').indexOf(myId)===-1))"  class="item" effect="dark" content="收藏" placement="top-start">
                <el-button @click="collect(item)" icon="el-icon-star-off" size="mini"></el-button>
                </el-tooltip>
            </div>
            </el-card>
            </div>
        </div>
        <div><el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination></div>
</el-card>

</div>
<el-dialog
  title="发帖"
  :visible.sync="dialogVisible"
  width="55%"
  :before-close="overTime">
  <el-form ref="sendArea" :model="messageInfo" :rules="rules">
    <el-form-item label="标题" prop="title">
    <el-input v-model="messageInfo.title"></el-input>
  </el-form-item>
  <el-form-item label="内容" prop="textarea">
    <el-input type="textarea" v-model="messageInfo.textarea"></el-input>
  </el-form-item>
    </el-form>
    <div style="display:flex">
    <div><img style="margin-right:3px" v-for="item in picShow" :key="item.uid" :src="item.url" class="avatar"></div>
    <el-upload
  ref="upPic"
  class="avatar-uploader"
  :action="evUrl+'zj/messageImage'"
  :limit=3
  :data="messageInfo"
  :auto-upload="false"
  :on-progress="submitFile"
  :on-success="handleAvatarSuccess"
  :on-remove="removeFile"
  :on-change="picPre">
  <div>
    <!-- <div><img v-for="item in picShow" :key="item.uid" :src="item.url" class="avatar"></div> -->
    <div><i v-if="!flag" class="el-icon-plus avatar-uploader-icon"></i></div>
  </div>
</el-upload>

  </div>

<el-button @click="makePic" type="primary">提交</el-button>
</el-dialog>
<el-dialog
  title="信息"
  :visible.sync="openMessage"
  width="55%">
  <div class="infoArea">
    <div class="header">
    <div class="header_left">
      <!-- <el-image style="width:100%;height:100%" :src="evUrl+openInformation.user_pic"></el-image> -->
      <img style="width:100%;height:100%" :src="evUrl+(openInformation.user_pic)">
    </div>
    <div class="header_right">
    <h3>{{openInformation.uName}}</h3>
    <h4>{{flag2? (openInformation.time+'').slice(11,16):(openInformation.time+'').slice(2,16).replace('T',' ')}}</h4>
    </div>
  </div>
  <div class="body_center" style="white-space: pre-wrap;">{{openInformation.content}}</div>
  <div class="footer_images">
    <div class="pic_picture" style="margin-right:5px" v-for="item in openInformation.c_pic.split(',').slice(1)" :key="item">
      <el-image style="width:100%;height:100%" :src="evUrl+item"></el-image>
    </div>
  </div>
  </div>
</el-dialog>
    <div class="right"><el-card class="box-card otherCard" :body-style="{padding:'6px'}">
  <el-tooltip class="item" effect="dark" content="发帖" placement="top-start">
  <el-button @click="sendInfo" type="primary" icon="el-icon-edit"></el-button>
  </el-tooltip>
  <el-tooltip v-if="!myInfo" class="item" effect="dark" content="我的" placement="top-start">
  <el-button  @click="setInfot" type="primary" icon="el-icon-user"></el-button>
  </el-tooltip>
  <el-tooltip v-else class="item" effect="dark" content="返回" placement="top-start">
  <el-button  @click="setInfof" type="primary" icon="el-icon-back"></el-button>
  </el-tooltip>
  <el-tooltip v-if="!myLike" class="item" effect="dark" content="收藏" placement="top-start">
  <el-button @click="getCollect" type="primary" icon="el-icon-star-off"></el-button>
  </el-tooltip>
  <el-tooltip v-else class="item" effect="dark" content="返回" placement="top-start">
  <el-button  @click="setInfof" type="primary" icon="el-icon-back"></el-button>
  </el-tooltip>

</el-card>
</div>
  </div>
</template>
<script>
import { sendMessage, getMessage, deleteMessage, openInfoLook, collectInfo, cancelCollInfo } from '../api/info'
export default {
  data () {
    return {
      currentPage: 1,
      total: 10,
      evUrl: this.$evUrl,
      dialogVisible: false,
      otherDialogVisible: false,
      imageUrl: '',
      myId: '',
      myInfo: '',
      flag2: false,
      dealTime: 0,
      picNum: 0,
      flag: false,
      nowadays: '',
      role: '',
      myLike: '',
      otherRuleForm: {
        title: '',
        desc: '',
        time: '',
        pic: ''
      },
      text: '',
      openMessage: false,
      // 信息内容
      openInformation: {
        user_pic: '',
        c_pic: ''
      },
      messageInfo: {
        c_pic: '',
        uid: '',
        title: '',
        textarea: '',
        cId: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        textarea: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 1, max: 180, message: '长度在 1 到 180 个字符', trigger: 'blur' }
        ]
      },
      messageData: [],
      picShow: []
    }
  },
  methods: {
    // 更改页码
    handleCurrentChange (val) {
      this.currentPage = val
      this.getMessageInfo()
    },
    sendInfo () {
      if (!window.localStorage.getItem('token')) {
        return this.$message.info('请登录')
      }
      this.dialogVisible = true
      this.messageInfo.cId = ''

      this.picShow = []
      this.flag = false
    },

    // handleClose () {
    //   this.dialogVisible = false
    // },
    otherHandleClose () {
      this.otherDialogVisible = false
    },
    // 发起表格
    submitForm () {
      this.$refs.sendArea.validate((valid) => {
        if (valid) {
          this.messageInfo.uid = window.localStorage.getItem('id')
          sendMessage({ ...this.messageInfo }).then(({ data }) => {
            this.$refs.sendArea.resetFields()
            this.messageInfo.cId = data.cId
            // this.$refs.upPic.clearFiles()
            this.$refs.upPic.submit()

            // this.imageUrl = ''
            // this.messageInfo.uid = ''
            // this.messageInfo.title = ''
            // this.messageInfo.textarea = ''
            this.getMessageInfo()
            this.dialogVisible = false
            this.$message.success('发布成功')
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    getMessageInfo () {
      getMessage({ currentPage: this.currentPage, info: this.myInfo, myLike: this.myLike }).then(({ data }) => {
        // console.log(data)
        this.nowadays = this.$moment().format('YYYY-MM-DD 00:00:00')
        // console.log('时间', this.nowadays, (typeof this.nowadays))
        this.messageData = data.result
        this.total = data.total
        if (window.localStorage.getItem('token')) {
          this.myId = window.localStorage.getItem('id')
          this.role = JSON.parse(window.localStorage.getItem('userInfo')).role
        }
        // console.log(this.myId)
        // console.log(this.role)
      })
    },
    // 获取我的帖子
    setInfot () {
      if (!window.localStorage.getItem('token')) {
        return this.$message.info('请登录')
      }
      this.currentPage = 1
      this.myInfo = this.myId
      this.myLike = ''
      this.getMessageInfo()
    },
    // 获取全部
    setInfof () {
      this.currentPage = 1
      this.myInfo = ''
      this.myLike = ''
      this.getMessageInfo()
    },
    // 删除帖子
    deleteIt (row) {
      deleteMessage(row).then(({ data }) => {
        this.$message.success(data)
        this.getMessageInfo()
        // console.log(data)
      })
    },
    // 打开帖子
    openDialog (row) {
      // console.log('当前时间', new Date())
      openInfoLook({ ...row }).then(({ data }) => {
        // console.log(data)
        if (data.length > 0) {
          this.openInformation = data[0]
          // console.log('1222', this.openInformation)
          if (new Date((this.openInformation.time + '').slice(0, 21).replace('T', ' ')) < (new Date(this.nowadays))) {
            this.flag2 = false
          } else {
            this.flag2 = true
          }
        }
        this.openMessage = true
      })
      // this.openInformation = row
      // console.log(row)
      // console.log(this.openInformation)

      // console.log(typeof this.openInformation.time)
      // new Date(openInformation.c_time.slice(0,21).replace('T',' '))>nowadays
      // console.log('类型', new Date(this.openInformation.c_time.slice(0, 21).replace('T', ' ')), typeof new Date(this.openInformation.c_time.slice(0, 21).replace('T', ' ')))
    },
    // 图片上传前
    picPre (file, fileList) {
      const obj = {}
      // console.log('上传文件')
      // console.log(file)
      // console.log(fileList)

      if (this.picShow.length <= 3) {
        obj.uid = file.raw.uid
        obj.url = window.URL.createObjectURL(file.raw)
        this.picShow.push(obj)
      }

      if (this.picShow.length >= 3) {
        this.flag = true
      }

      // console.log(this.picShow)

      // console.log(window.URL.createObjectURL(file.raw))
      this.imageUrl = window.URL.createObjectURL(file.raw)
    },
    // 收藏按钮
    collect (row) {
      if (!window.localStorage.getItem('token')) {
        return this.$message.info('请登录')
      }
      this.currentPage = 1
      const myId = window.localStorage.getItem('id')
      // console.log('收藏')
      collectInfo({ c_id: row.c_id, myId: myId })
      this.messageData.forEach(ele => {
        let index2 = 0
        // console.log(ele)
        if (ele == row) {
          index2 = this.messageData.indexOf(ele)
          this.messageData[index2].c_collect = `${this.messageData.c_collect}+',${myId}`
        }
      })
    },
    // 取消收藏
    cancelColleb (row) {
      const newArr = [...row.c_collect.split(',')]

      const index = newArr.indexOf(this.myId)
      const newVal = newArr.splice(index, 1)
      // console.log('11', deleteVal)
      // console.log('22', newVal)
      // console.log('22', newArr)
      let index2 = 0
      this.messageData.forEach(ele => {
        // console.log(ele)
        if (ele == row) {
          index2 = this.messageData.indexOf(ele)
          this.messageData[index2].c_collect = newArr.join(',')
        }
      })
      // console.log('为什么', row)
      // console.log(this.messageData)
      // console.log('123555555', index2)
      // console.log('123555555', this.messageData[index2])
      this.messageData[index2].c_collect = newArr.join(',')

      cancelCollInfo({ c_id: row.c_id, newVal: newArr.join(',') }).then(({ data }) => {

      })
    },
    // 查看收藏
    getCollect () {
      if (!window.localStorage.getItem('token')) {
        return this.$message.info('请登录')
      }
      this.myLike = this.myId
      this.myInfo = ''

      this.getMessageInfo()
    },
    // 移除文件
    removeFile (file, fileList) {
      // console.log('移除文件')
      // console.log(file)
      // console.log(fileList)
      this.picShow.forEach(ele => {
        if (ele.uid === file.raw.uid) {
          this.picShow.splice(this.picShow.indexOf(ele), 1)
        }
      })
      this.flag = false
      // console.log(this.picShow)

      // console.log(window.URL.createObjectURL(file.raw))
    },
    // 手动上传
    makePic () {
      this.submitForm()
    },
    // 关闭单框前
    overTime () {
      // console.log('你好')
      this.$refs.sendArea.resetFields()
      this.$refs.upPic.clearFiles()
      this.imageUrl = ''
      this.messageInfo.uid = ''
      this.messageInfo.title = ''
      this.messageInfo.textarea = ''
      this.getMessageInfo()
      this.dialogVisible = false
    },
    // 上传成功
    handleAvatarSuccess (response) {
      this.getMessageInfo()

      this.dealTime++
      if (this.dealTime === this.picNum) {
        this.$refs.upPic.clearFiles()
        // this.imageUrl = ''
        this.dealTime = 0
        this.picNum = 0
        // this.flag = false
      }

      // this.overTime()
    },
    // 没有图片或失败
    failInfo (err) {
      console.log('aaaaaaa', err)
    },
    // 文件上传时
    submitFile () {
      this.picNum = this.picShow.length
      this.picShow = []
      // this.flag = false
    }

  },
  mounted () {
    this.getMessageInfo()
  }

}
</script>
<style scoped lang='less'>
.my-containner{
  height:90vh;
  .big{
    display:flex;
    justify-content: start;
    flex-wrap:wrap;
    .small{

      width:200px;
      height:200px;
      margin:0 5px;
      .innerCard{
        position: relative;
        width: 100%;
        height:90%;
        .operate{
        position: absolute;
        right: 5px;
        bottom:2px;
        button{
          margin:0;
        }

       }
      }
      tit{
        height: 100%;
        margin:5px 0;

      }
    }
  }
  display: flex;
  align-items: flex-start;
  .left{
    flex: 0 0 auto;
    width: 1100px;

  }
  .el-dialog{
      width: 55%;
    }
  .right{
    flex: 1 1 auto;
     .otherCard{
      // padding:6px;
      position:fixed;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
  }
}
.infoArea{
  display:flex;
  flex-direction:column;
  .header{
    display:flex;
    height:100px;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    .header_left{
      height:100%;
      width:100px;
    }
    .header_right{
      margin-top:15px;
      margin-left:5px;
      h3{
        padding-bottom: 13px;
        font-size: 14px Base;
        color: #409EFF;
      }
      h4{
        font-size: 12px Extra Small;
        color: #909399;

      }
    }
  }
  .footer_images{
    display: flex;
    flex-wrap: wrap;
    width:100%;
    .pic_picture{
      width: 168px;
      height: 168px;
    }
  }
  .body_center{
    margin:28px 0;
    color:#000000;
    font-size:16px Medium;
  }
}
</style>
